<template>
  <div>
    <canvas ref="cellcav" :width="width" :height="height"></canvas>
  </div>
</template>

<script>
const ImageType = {
  MAIN: "/chuneng/img/dianlu.jpg",
  CELL: "/chuneng/img/cell.png",
  CELLGRAY: "/chuneng/img/cell-gray.png",
};

export default {
  data() {
    return {
      width: 800,
      height: 400,
    };
  },
  props: {
    row: {
      type: Number,
      default: 3,
    },
    col: {
      type: Number,
      default: 4,
    },
    invalid: Array,
  },

  methods: {
    drawImg(ctx, x, y, w, h, t) {
      const image = new Image(w, h); // Using optional size for image

      image.onload = function () {
        // console.log(e)
        ctx.drawImage(this, x, y, w, h);
      };
      image.src = t;
      // image.style.di
      // document.body.appendChild(image)
    },
    line(ctx, color, x1, y1, x2, y2) {
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.strokeStyle = color;
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.closePath();
      ctx.stroke();
    },
    cellText(ctx, s, x, y, w, h, state = false) {
      if (state) {
        ctx.strokeStyle = "rgb(0, 255,0)";
      } else {
        ctx.strokeStyle = "rgb(255, 0,0)";
      }

      ctx.fillStyle = "rgb(255,255,255)";
      ctx.lineWidth = 4;
      ctx.strokeRect(x, y, w, h);
      ctx.fillRect(x, y, w, h);

      ctx.font = "20px serif";
      ctx.textAlign = "center";
      if (state) {
        ctx.fillStyle = "rgb(0, 255,0)";
      } else {
        ctx.fillStyle = "rgb(255, 0,0)";
      }
      ctx.fillText(s, x + w / 2, y + h / 2 + 7);
    },
    draw() {
      let canvas = this.$refs["cellcav"];
      // const width = 500;
      const height = this.height;
      const img1w = 60;
      const img1h = 90;
      const baseLineW = 50;
      const img2w = 60;
      const img2h = 80;
      const cell_w = img2w + baseLineW;
      const lineh = 60;
      const cellTextW = 90;
      const cellTextH = 25;
      if (canvas.getContext) {
        let ctx = canvas.getContext("2d");

        // ctx.lineWidth = 4;
        // ctx.fillStyle = "rgb(255,0,0)";
        // ctx.strokeRect(0, height / 2 - img1h / 2, img1w, img1h);
        this.drawImg(
          ctx,
          0,
          height / 2 - img1h / 2,
          img1w,
          img1h,
          ImageType.MAIN
        );
        this.line(
          ctx,
          "rgb(70,114,194)",
          img1w,
          height / 2,
          img1w + img1w / 2,
          height / 2
        );
        this.line(
          ctx,
          "rgb(70,114,194)",
          img1w + img1w / 2,
          height / 2,
          img1w + img1w / 2,
          height / 2 - 2 * lineh
        );
        this.line(
          ctx,
          "rgb(70,114,194)",
          img1w + img1w / 2,
          height / 2,
          img1w + img1w / 2,
          height / 2 + 2 * lineh
        );

        for (let i = 0; i < this.row; i++) {
          for (let j = 0; j < this.col; j++) {
            this.line(
              ctx,
              "rgb(70,114,194)",
              img1w + img1w / 2 + j * cell_w,
              height / 2 - 2 * lineh + 2 * i * lineh,
              img1w + img1w / 2 + (j + 1) * cell_w - img2w,
              height / 2 - 2 * lineh + 2 * i * lineh
            );
            // ctx.fillRect(

            // );
            let idx = i * this.col + j;
            if (this.invalid && this.invalid.includes(idx)) {
              this.drawImg(
                ctx,
                img1w + img1w / 2 + (j + 1) * cell_w - img2w,
                height / 2 - 2 * lineh + 2 * i * lineh - img2h / 2,
                img2w,
                img2h,
                ImageType.CELLGRAY
              );
              this.cellText(
                ctx,
                `Cell ${i * this.col + j + 1}#`,
                img1w +
                  img1w / 2 +
                  (j + 1) * cell_w -
                  img2w / 2 -
                  cellTextW / 2,
                height / 2 - 2 * lineh + 2 * i * lineh + img2h / 2 + 5,
                cellTextW,
                cellTextH,
                false
              );
            } else {
              this.drawImg(
                ctx,
                img1w + img1w / 2 + (j + 1) * cell_w - img2w,
                height / 2 - 2 * lineh + 2 * i * lineh - img2h / 2,
                img2w,
                img2h,
                ImageType.CELL
              );
              this.cellText(
                ctx,
                `Cell ${i * this.col + j + 1}#`,
                img1w +
                  img1w / 2 +
                  (j + 1) * cell_w -
                  img2w / 2 -
                  cellTextW / 2,
                height / 2 - 2 * lineh + 2 * i * lineh + img2h / 2 + 5,
                cellTextW,
                cellTextH,
                true
              );
            }
          }

          this.line(
            ctx,
            "rgb(70,114,194)",
            img1w + img1w / 2 + this.col * cell_w,
            height / 2 - 2 * lineh + 2 * i * lineh,
            img1w + img1w / 2 + this.col * cell_w + cell_w + 10,
            height / 2 - 2 * lineh + 2 * i * lineh
          );
          this.cellText(
            ctx,
            `Pack${i + 1}`,
            img1w + img1w / 2 + this.col * cell_w + 10,
            height / 2 - 2 * lineh + 2 * i * lineh - cellTextH - 5,
            cellTextW,
            cellTextH,
            true
          );
        }

        this.line(
          ctx,
          "rgb(70,114,194)",
          img1w + img1w / 2 + this.col * cell_w + cell_w + 10,
          height / 2 - 2 * lineh,
          img1w + img1w / 2 + this.col * cell_w + cell_w + 10,
          height / 2 + 2 * lineh
        );

        // drawing code here
        // console.log('!!!!!!!!')
      } else {
        // canvas-unsupported code here
      }
    },
  },

  mounted() {
    this.draw();
  },
};
</script>

<style>
</style>